<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
</head>

<body>
    <div class="container">
        <main>
            <!-- 用户信息 -->
            <a href="./mine-edit.html" class="header">
                <div class="message">
                    <div class="img-box">
                        <img src="./imgs/dog.jpg" alt="">
                        <i class="iconfont icon-vip"></i>
                    </div>
                    <div class=user-name>
                        <p>用户名</p>
                        <i class="arrows">&gt;</i>
                    </div>
                </div>
                <p class="sign-box"><span>个性签名：</span><i class="sign">xxxxxxxxxxxxxxxxxxxxxx</i></p>
                <!-- 用来上传文件 隐藏样式 只需要作用 -->
                <input type="file" id="upload" class="dpnone">
            </a>
            <!-- 个人动态 -->
            <div class="state">
                <div class="state-left">
                    <span class="iconfont icon-fuwuqi"></span>
                    <i>个人动态</i>
                </div>
                <div class="state-right">
                    <span>10条</span>
                    <i class="arrows">&gt;</i>
                </div>
            </div>
            <!-- 运动数据 -->
            <a href="./run-data.html" class="run-data">
                <div class="top">
                    <div class="left">
                        <span class="iconfont icon-digital"></span>
                        <i>运动数据</i>
                    </div>
                    <div class="right">
                        <i class="arrows">&gt;</i>
                    </div>
                </div>
                <div class="con">
                    <div>
                        <p>总运动</p>
                        <p>
                            <span>99999</span>
                            <i>分钟</i>
                        </p>
                    </div>
                    <div>
                        <p>本周消耗</p>
                        <p>
                            <span>99999</span>
                            <i>千卡</i>
                        </p>
                    </div>
                </div>
            </a>
            <!-- 运动徽章 -->
            <div class="badge">
                <div class="top">
                    <div class="left">
                        <span class="iconfont icon-huizhang"></span>
                        <i>我的运动徽章</i>
                    </div>
                    <div>
                        <i class="arrows">&gt;</i>
                    </div>
                </div>
                <div class="con">
                    <div>
                        <img src="./imgs/mybadge01.jpg" alt="">
                    </div>
                    <div>
                        <img src="./imgs/mybadge02.jpg" alt="">
                    </div>
                    <div>
                        <img src="./imgs/mybadge03.jpg" alt="">
                    </div>
                </div>
            </div>
            <!-- 退出登录 -->
            <div class="quit">
                退出登录
            </div>
        </main>
        <div id="tab"></div>
    </div>
</body>

</html>
